import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Modal, message } from 'antd';
import Form from './components/SearchForm';
import { checkInit } from '@/utils/util';

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading: boolean,
  list: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object
}

const ONE_PAGE_SIZE = 10;

@connect(({ unit_task_check, loading, menu }) => ({
  list: unit_task_check.list || {},
  dict: unit_task_check.dict,
  buttons: menu.buttons,
  loading: loading.effects['unit_task_check/queryPage']
}))
class Build extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1
  };

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;

    dispatch({
      type: 'unit_task_check/queryPage',
      payload: {
        pageNum: offset,
        pageSize: size,
        targetTypeList: ['1', '2']
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `unit_task_check/initCond` }) : this.queryData();
  }

  render() {
    const { buttons } = this.props;
    const btnList = {};
    if(Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }
    const { data = [], dataCnt } = this.props.list;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id,
      reportId: item.reportId,
      taskName: item.taskName ? item.taskName : ' ',
      userName: item.userName ? item.userName : ' ',
      name: item.name ? item.name : ' ',
      updateTime: item.updateTime ? item.updateTime : ' ',
      taskStatusName: item.taskStatusName ? item.taskStatusName : ' ',
      statusName: item.statusName ? item.statusName : ' ',
      typeName: item.ownerCheckTarget && item.ownerCheckTarget.typeName ? item.ownerCheckTarget.typeName : ' ',
      buildName: item.ownerCheckTarget ? item.ownerCheckTarget.buildName : ' '
      })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      }
    };
    const columns = [{
        title: '记录来源',
        dataIndex: 'taskName',
      }, {
        title: '检查人',
        dataIndex: 'userName',
      }, {
        title: '任务名称',
        dataIndex: 'name',
      }, {
        title: '状态',
        dataIndex: 'statusName',
      }, {
        title: '任务状态',
        dataIndex: 'taskStatusName',
      }, {
        title: '建筑名称',
        dataIndex: 'buildName',
      }, {
        title: '检查时间',
        dataIndex: 'updateTime',
      }, {
        title: '操作', key: 'x', render: (record) => {
        return (
          <div style={{display: 'flex'}}>
            <Link to={`/data/unit_task_check/${record.reportId}/details`}>详情</Link>
          </div>
        )}
      }];
    return (
      <div>
        <Form current={ this.state.current } initCurrent={this.initCurrent} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
      </div>
    );
  }
}

export default Build;
